;(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
            window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
                timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        function( callback ){
            window.setTimeout(callback, 1000 / 60);
        };
})();
;(function(){
    var annulus = {};

    annulus.init = function(options){
        var fun = {};
        var id = options.id;
        var eleWidth = options.eleWidth * 2;
        var width = options.width * 2;
        var value = options.value || 0;
        var fontSize = options.fontSize || 50;
        var roundInWidth = (options.roundInWidth || 10) * 2;
        var roundOutWidth = (options.roundOutWidth || 10) * 2;

        var canvas = document.getElementById(id);
        canvas.setAttribute("width", eleWidth);
        canvas.setAttribute("height", eleWidth);

        var ctx =  canvas.getContext('2d');

        fun.draw = function(val){
            ctx.clearRect(0, 0, eleWidth, eleWidth);
            ctx.beginPath();
            //底圈
            ctx.arc(eleWidth/2,eleWidth/2,width/2, -(Math.PI/2), (Math.PI * 2-(Math.PI/2))*1,false);
            ctx.lineWidth = roundInWidth;
            ctx.strokeStyle = '#ebeeff';
            ctx.shadowBlur = 0;
            ctx.stroke();

            ctx.beginPath();
            ctx.fillStyle = "#999999";
            //绘制文字
            ctx.font = fontSize + "px sans-serif";
            ctx.fillText(v +"%", eleWidth/2, eleWidth/2 + fontSize/3);
            ctx.textAlign="center";
            ctx.stroke();

            ctx.beginPath();
            //外圈
            ctx.arc(eleWidth/2,eleWidth/2,width/2, -(Math.PI/2), (Math.PI * 2)* val -(Math.PI/2),false);
            ctx.lineWidth = roundOutWidth;
            ctx.lineCap = "round";
            ctx.shadowBlur = roundOutWidth;
            ctx.shadowColor = "#00acec";
            ctx.strokeStyle = '#00acec';

            ctx.stroke();
        }

        var timer=null,n=0,v=1;

        fun.loadCanvas = function (nowT) {
            timer = setInterval(function(){
                if(n>nowT){
                    clearInterval(timer);
                }else{
                    fun.draw(n);
                    n += 0.01;
                    v += 1;
                }
            },15);
        }

        fun.loadCanvas(value/100);
        timer=null;
    }


    //转圈的js



    annulus.turn = function (options) {
        var fun = {};
        var id = options.id;
        var eleWidth = options.eleWidth * 2;
        var width = options.width * 2;
        var fontSize = options.fontSize * 2;
        var roundWidth = options.roundWidth * 2;
        var fontType = options.fontType || 'sans-serif';
        var fontColor = options.fontColor || '#00ACEC';
        var fontValue = options.fontValue || '0.00';
        var roundInColor = options.roundInColor || '#7FD4F6';
        var roundOutColor = options.roundOutColor || '#00ACEC';
        var speed = options.speed || 30;

        var canvas = document.getElementById(id);
        canvas.setAttribute("width", eleWidth);
        canvas.setAttribute("height", eleWidth);
        var ctx =  canvas.getContext('2d');

        fun.draw = function(val){
            ctx.clearRect(0, 0, eleWidth, eleWidth);
            //外圈
            ctx.beginPath();
            ctx.arc(eleWidth/2,eleWidth/2,width/2, - (Math.PI/2), (Math.PI * 2 - (Math.PI/2))*1,false);
            ctx.lineWidth = roundWidth;
            ctx.strokeStyle = roundOutColor;
            ctx.shadowBlur = 0;
            ctx.stroke();

            //内圈
            ctx.beginPath();
            ctx.arc(eleWidth/2,eleWidth/2,width/2 - roundWidth, (Math.PI * 2) * fun.num(0+val) - (Math.PI/2), (Math.PI * 2) * fun.num(0.25+val) - (Math.PI/2),false);
            ctx.lineWidth = roundWidth;
            //ctx.lineCap = "round";
            //ctx.shadowBlur = 10;
            //ctx.shadowColor = "#00acec";
            ctx.strokeStyle = roundInColor;
            ctx.stroke();

            //内圈
            ctx.beginPath();
            ctx.arc(eleWidth/2,eleWidth/2,width/2 - roundWidth, (Math.PI * 2) * fun.num(0.5+val) - (Math.PI/2), (Math.PI * 2) * fun.num(0.75+val) - (Math.PI/2),false);
            ctx.lineWidth = roundWidth;
            //ctx.lineCap = "round";
            //ctx.shadowBlur = 10;
            //ctx.shadowColor = "#00acec";
            ctx.strokeStyle = roundInColor;
            ctx.stroke();

            //绘制文字
            ctx.beginPath();
            ctx.fillStyle = fontColor;
            ctx.font = fontSize + "px " + fontType;
            ctx.textAlign="center";
            ctx.fillText( fontValue, eleWidth/2, eleWidth/2 + fontSize/3);
            ctx.stroke();

        }

        fun.num = function (num) {
            if(num > 1){
                num = num -1;
            }
            return num;
        }

        var turnn=0;

        fun.loadCanvas = function () {
            setInterval(function(){
                fun.draw(turnn);
                turnn += 0.003;
                if (turnn > 1) turnn = 0;
            },speed);
        }

        //animate();

        fun.animate = function() {
            requestAnimFrame( fun.animate );
            fun.draw(turnn);
            turnn += 0.005;
            if (turnn > 1) turnn = 0;

        }

        //animate();

        //fun.loadCanvas();

        fun.animate();

    }

    window.annulus = annulus;
})();